// 日记数据
const diaries = [
    {
        id: 1,
        title: "React Hooks 深入理解",
        date: "2023-10-15",
        excerpt: "今天深入学习了React Hooks的工作原理，特别是useEffect和useState的实现机制...",
        content: `<p>今天深入学习了React Hooks的工作原理，特别是useEffect和useState的实现机制。React Hooks是React 16.8引入的新特性，它允许我们在函数组件中使用状态和其他React特性。</p>
                 <p>useState Hook让我们在函数组件中添加状态。之前如果我们需要使用状态，必须将函数组件转换为类组件。但现在，我们可以直接在函数组件中调用useState。</p>
                 <p>useEffect Hook允许我们在函数组件中执行副作用操作。它可以看作是componentDidMount、componentDidUpdate和componentWillUnmount这三个生命周期方法的组合。</p>
                 <p>通过学习，我理解了Hooks的规则：只能在函数最顶层调用Hooks，不要在循环、条件判断或子函数中调用。这也是ESLint插件能够帮助我们检查Hooks使用是否正确的原因。</p>`,
        image: "https://picsum.photos/400/300?random=1"
    },
    {
        id: 2,
        title: "CSS Grid布局实战",
        date: "2023-10-10",
        excerpt: "完成了响应式网站布局项目，全面使用CSS Grid实现复杂的布局结构...",
        content: `<p>完成了响应式网站布局项目，全面使用CSS Grid实现复杂的布局结构。CSS Grid是近些年CSS最重要的布局功能之一，它让我们能够创建二维的布局系统。</p>
                 <p>与Flexbox主要处理一维布局不同，Grid可以同时处理行和列，这使得创建复杂的网页布局变得更加简单和直观。</p>
                 <p>我特别喜欢Grid的命名区域功能，它让HTML结构和CSS布局的对应关系更加清晰。通过给网格区域命名，然后在项目中使用这些名称进行定位，代码的可读性大大提高。</p>
                 <p>在实际项目中，我结合使用Grid和Flexbox，Grid用于整体布局，Flexbox用于组件内部布局，这种组合使用的方式非常高效。</p>`,
        image: "https://picsum.photos/400/300?random=2"
    },
    {
        id: 3,
        title: "JavaScript闭包与作用域",
        date: "2023-10-05",
        excerpt: "重新温习了JavaScript中的作用域链和闭包概念，这是JS中非常重要但又容易混淆的概念...",
        content: `<p>重新温习了JavaScript中的作用域链和闭包概念，这是JS中非常重要但又容易混淆的概念。作用域决定了变量的可见性，而闭包可以让函数访问并记住其词法作用域中的变量，即使函数是在词法作用域之外执行。</p>
                 <p>闭包的形成需要三个条件：1. 函数嵌套；2. 内部函数引用外部函数的变量；3. 内部函数被外部函数返回或在别处被使用。</p>
                 <p>闭包的应用非常广泛，常见的有：模块模式、柯里化、函数记忆、事件处理等。理解闭包对于编写高质量JavaScript代码至关重要。</p>
                 <p>今天还学习了如何避免闭包可能导致的内存泄漏问题，主要是注意不再需要的引用要及时释放。</p>`,
        image: "https://picsum.photos/400/300?random=3"
    },
    {
        id: 4,
        title: "前端性能优化策略",
        date: "2023-09-28",
        excerpt: "学习了一系列前端性能优化的方法和工具，包括代码分割、懒加载、缓存策略等...",
        content: `<p>学习了一系列前端性能优化的方法和工具，包括代码分割、懒加载、缓存策略等。性能优化是现代Web开发中非常重要的一环，直接影响用户体验。</p>
                 <p>代码分割是Webpack等构建工具提供的重要功能，它允许将代码分成多个包，然后按需加载或并行加载。这可以显著减少初始加载时间。</p>
                 <p>图片懒加载是另一个重要的优化技术，特别是对于图片较多的网站。通过Intersection Observer API，我们可以实现高效的懒加载，只在图片进入视口时加载它们。</p>
                 <p>缓存策略也很重要，合理的缓存可以减少服务器负载并加快页面加载速度。Service Worker是实现高级缓存策略的强大工具。</p>`,
        image: "https://picsum.photos/400/300?random=4"
    },
    {
        id: 5,
        title: "TypeScript类型系统进阶",
        date: "2023-09-20",
        excerpt: "深入学习了TypeScript的高级类型特性，包括泛型、条件类型和映射类型等...",
        content: `<p>深入学习了TypeScript的高级类型特性，包括泛型、条件类型和映射类型等。TypeScript的类型系统非常强大，可以在编译时捕获许多潜在错误。</p>
                 <p>泛型是TypeScript中非常重要的概念，它允许我们创建可重用的组件，一个组件可以支持多种类型的数据。这样用户以自己的数据类型来使用组件。</p>
                 <p>条件类型允许我们根据类型关系选择不同的类型，类似于JavaScript中的三元运算符。条件类型与泛型结合使用非常强大。</p>
                 <p>映射类型允许我们基于旧类型创建新类型，通常与keyof和in关键字一起使用。常见的应用如Partial、Readonly、Pick等工具类型。</p>`,
        image: "https://picsum.photos/400/300?random=5"
    },
    {
        id: 6,
        title: "Webpack配置与优化",
        date: "2023-09-15",
        excerpt: "系统学习了Webpack的配置方法和优化技巧，包括loader、plugin的使用和打包优化...",
        content: `<p>系统学习了Webpack的配置方法和优化技巧，包括loader、plugin的使用和打包优化。Webpack是现代前端开发中最重要的构建工具之一。</p>
                 <p>Loader用于对模块的源代码进行转换，它们可以将文件从不同的语言转换为JavaScript，或将内联图像转换为data URL。</p>
                 <p>Plugin用于执行更广泛的任务，包括打包优化、资源管理和环境变量注入等。与Loader相比，Plugin拥有更强大的功能。</p>
                 <p>打包优化是Webpack使用中的重要环节，包括代码分割、Tree Shaking、缓存等多种技术。合理的优化可以显著减小打包文件大小，提高应用性能。</p>`,
        image: "https://picsum.photos/400/300?random=6"
    }
];

// DOM加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
    // 初始化日记列表
    renderDiaries();
    
    // 设置导航菜单交互
    setupNavigation();
    
    // 设置模态框交互
    setupModal();
    
    // 设置表单提交处理
    setupForm();
});

// 渲染日记列表
function renderDiaries() {
    const diariesGrid = document.getElementById('diaries-grid');
    
    diaries.forEach(diary => {
        const diaryCard = document.createElement('div');
        diaryCard.className = 'diary-card';
        diaryCard.dataset.id = diary.id;
        
        diaryCard.innerHTML = `
            <div class="diary-image">
                <img src="${diary.image}" alt="${diary.title}">
            </div>
            <div class="diary-content">
                <p class="diary-date">${diary.date}</p>
                <h3 class="diary-title">${diary.title}</h3>
                <p class="diary-excerpt">${diary.excerpt}</p>
                <a href="#" class="read-more">阅读更多</a>
            </div>
        `;
        
        diariesGrid.appendChild(diaryCard);
    });
}

// 设置导航菜单交互
function setupNavigation() {
    const hamburger = document.querySelector('.hamburger');
    const navMenu = document.querySelector('.nav-menu');
    
    // 移动端菜单切换
    hamburger.addEventListener('click', function() {
        hamburger.classList.toggle('active');
        navMenu.classList.toggle('active');
    });
    
    // 点击导航链接时关闭移动菜单
    document.querySelectorAll('.nav-menu a').forEach(link => {
        link.addEventListener('click', function() {
            hamburger.classList.remove('active');
            navMenu.classList.remove('active');
        });
    });
    
    // 平滑滚动到锚点
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function(e) {
            e.preventDefault();
            
            const targetId = this.getAttribute('href');
            if (targetId === '#') return;
            
            const targetElement = document.querySelector(targetId);
            if (targetElement) {
                const navHeight = document.querySelector('.navbar').offsetHeight;
                const targetPosition = targetElement.getBoundingClientRect().top + window.pageYOffset - navHeight;
                
                window.scrollTo({
                    top: targetPosition,
                    behavior: 'smooth'
                });
            }
        });
    });
}

// 设置模态框交互
function setupModal() {
    const modal = document.getElementById('diary-modal');
    const closeBtn = document.querySelector('.close');
    
    // 点击日记卡片打开模态框
    document.addEventListener('click', function(e) {
        const diaryCard = e.target.closest('.diary-card');
        if (diaryCard) {
            const diaryId = parseInt(diaryCard.dataset.id);
            const diary = diaries.find(d => d.id === diaryId);
            
            if (diary) {
                openModal(diary);
            }
        }
    });
    
    // 点击关闭按钮关闭模态框
    closeBtn.addEventListener('click', closeModal);
    
    // 点击模态框外部关闭
    window.addEventListener('click', function(e) {
        if (e.target === modal) {
            closeModal();
        }
    });
    
    // ESC键关闭模态框
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape' && modal.style.display === 'block') {
            closeModal();
        }
    });
}

// 打开模态框并显示日记内容
function openModal(diary) {
    const modal = document.getElementById('diary-modal');
    const modalTitle = document.getElementById('modal-title');
    const modalDate = document.getElementById('modal-date');
    const modalContent = document.getElementById('modal-content');
    
    modalTitle.textContent = diary.title;
    modalDate.textContent = diary.date;
    modalContent.innerHTML = diary.content;
    
    modal.style.display = 'block';
    document.body.style.overflow = 'hidden'; // 防止背景滚动
}

// 关闭模态框
function closeModal() {
    const modal = document.getElementById('diary-modal');
    modal.style.display = 'none';
    document.body.style.overflow = 'auto'; // 恢复背景滚动
}

// 设置表单提交处理
function setupForm() {
    const contactForm = document.getElementById('contact-form');
    
    contactForm.addEventListener('submit', function(e) {
        e.preventDefault();
        
        // 获取表单数据
        const formData = {
            name: document.getElementById('name').value,
            email: document.getElementById('email').value,
            message: document.getElementById('message').value
        };
        
        // 简单验证
        if (!formData.name || !formData.email || !formData.message) {
            alert('请填写所有必填字段');
            return;
        }
        
        // 邮箱格式验证
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        if (!emailRegex.test(formData.email)) {
            alert('请输入有效的邮箱地址');
            return;
        }
        
        // 这里通常是发送到服务器的代码
        // 模拟发送成功
        alert('消息已发送！感谢您的联系。');
        contactForm.reset();
    });
}